<template>
	<div class="company-release-add">
		<!-- 添加招聘 -->
		<div class="detail-nav font13 h99">
			<router-link to="/vip/c_policy_declaration">{{$t('common.newJob.enterpriseCenter')}}</router-link>
			<span>&gt;</span>
			<router-link to="/vip/c_recruit_release_add">{{$t('common.newJob.addRecruitment')}}</router-link>
		</div>

		<div class="recruit-edit-content">
			<div class="recruit-edit-box">
				<div class="zmlTitle">{{$t('common.newJob.jobInfo')}}</div>
				<div class="recruit-edit-info">
					<table>
						<tr>
							<td>{{$t('common.newJob.jobTitle')}}</td>
							<td><el-input class="zhiwei" v-model="input_zw" :placeholder="$t('common.newJob.inputJobTitle')" maxlength="20"></el-input></td>
							<td>{{$t('common.newJob.peopleCount')}}</td>
							<td>
								<el-input class="num" :placeholder="$t('common.newJob.inputPeopleCount')" v-model="input_rs" @input="getRs" maxlength="10">
									<template slot="append">
										{{$t('common.newJob.peoples')}}
									</template>
								</el-input>
							</td>
						</tr>
						<tr>
							<td>{{$t('common.newJob.vacantType')}}</td>
							<td>
								<el-select v-model="input_lb" :placeholder="$t('common.newJob.select')">
									<el-option v-for="item in options_lb" :key="item.value" :label="item.text" :value="item.value"></el-option>
								</el-select>
							</td>
							<td>{{$t('common.newJob.workType')}}</td>
							<td>
								<el-select v-model="input_lx" :placeholder="$t('common.newJob.select')">
									<el-option v-for="item in options_lx" :key="item.value" :label="item.text" :value="item.value"></el-option>
								</el-select>
							</td>
						</tr>
						<tr>
							<td>{{$t('common.newJob.salary')}}</td>
							<td>
								<el-select v-model="input_price" :placeholder="$t('common.newJob.select')">
									<el-option v-for="item in options_price" :key="item.value" :label="item.text" :value="item.value"></el-option>
								</el-select>
							</td>
							<!-- <td class="flexItems">
								<el-input placeholder="请输入内容" v-model="input_price1" class="price">
									<template slot="append">
										k
									</template>
								</el-input>
								<span class="zml">至</span>
								<el-input placeholder="请输入内容" v-model="input_price2" class="price">
									<template slot="append">
										k
									</template>
								</el-input>
							</td> -->
							<td>{{$t('common.newJob.education')}}</td>
							<td>
								<el-select v-model="input_xl" :placeholder="$t('common.newJob.select')">
									<el-option v-for="item in options_xl" :key="item.value" :label="item.text" :value="item.value"></el-option>
								</el-select>
							</td>
						</tr>
						<tr>
							<td>{{$t('common.newJob.address')}}</td>
							<td><el-cascader v-model="input_address" :options="options_address" @change="handleChange" separator="-" :props="{ value: 'label' }" :placeholder="$t('common.newJob.select')"></el-cascader></td>
							<td>{{$t('common.newJob.experience')}}</td>
							<td>
								<el-select v-model="input_jy" :placeholder="$t('common.newJob.select')">
									<el-option v-for="item in options_jy" :key="item.value" :label="item.text" :value="item.value"></el-option>
								</el-select>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="recruit-edit-box">
				<div class="zmlTitle">{{$t('common.newJob.requirements')}}</div>
				<div class="recruit-edit-require">
					<div class="recruit-edit-require-textarea flex">
						<label>{{$t('common.newJob.duty')}}</label>
						<textarea v-model="positionStatement" :placeholder="$t('common.newJob.inputDuty')" maxlength="500"></textarea>
					</div>
					<div class="recruit-edit-require-textarea flex">
						<label>{{$t('common.newJob.require')}}</label>
						<textarea v-model="jobRequirements" :placeholder="$t('common.newJob.inputRequire')" maxlength="500"></textarea>
					</div>
				</div>
				<div class="recruit-edit-btn flexCenter">
					<button class="zmlBtn1" @click="publishTap()">{{$t('common.newJob.publish')}}</button>
					<button class="zmlBtn2" @click="saveTap()">{{$t('common.newJob.save')}}</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { ajax, showToast, ajaxAdd, notBlankStr } from '@/utils/js.js';
import { styleList, enterpriseNewJob, provinceCity } from '@/services/api.js';
const log = console.log;

export default {
	data() {
		return {
			input_zw: '', //职位名称
			input_rs: '', //招聘人数
			input_lb: '', //招聘类别
			input_lx: '', //工作类型
			input_price: '', //薪资
			input_xl: '', //学历要求
			input_address: [], //选择的地址数组
			input_jy: '', //经验要求
			
			positionStatement: '',	//岗位职责
			jobRequirements: '', //任职要求

			options_lb: [],
			options_lx: [],
			options_price: [],
			options_xl: [],
			options_jy: [],
			options_address: [] //地址
		};
	},
	mounted() {
		this.content();
	},
	watch: {
		'$i18n.locale'() {
			this.content();
		}
	},
	methods: {
		handleChange(value) {
			console.log(value);
			
		},
		getRs(e){
			this.input_rs = parseInt(e) || ''
		},
		content() {
			// 招聘类别
			ajax(this, styleList, { lxjp: 'vacantType' }, res => {
				this.options_lb = res.data;
			});

			// 工作类型
			ajax(this, styleList, { lxjp: 'workType' }, res => {
				this.options_lx = res.data;
			});

			// 薪资范围
			ajax(this, styleList, { lxjp: 'salaryRange' }, res => {
				this.options_price = res.data;
			});

			// 学历要求
			ajax(this, styleList, { lxjp: 'education' }, res => {
				this.options_xl = res.data;
			});
			
			// 经验要求
			ajax(this, styleList, { lxjp: 'WORK_EXPERIENCE' }, res => {
				this.options_jy = res.data;
			});

			// 省市
			ajax(this, provinceCity, {}, res => {
				this.options_address = res.data;
			});
		},

		canSubmit() {
			console.log(this.postData())
			if (notBlankStr(this.input_zw) == false) {
				showToast(this, this.$t('common.newJob.inputJobTitle'));
				return false
			}
			if (this.input_rs <= 0) {
				showToast(this, this.$t('common.newJob.inputPeopleCount'));
				return false
			}
			if (this.input_lb == "") {
				showToast(this, this.$t('common.newJob.selectVacantType'));
				return false
			}
			if (this.input_lx == "") {
				showToast(this, this.$t('common.newJob.selectWorkType'));
				return false
			}
			if (this.input_price == "") {
				showToast(this, this.$t('common.newJob.selectSalary'));
				return false
			}
			if (this.input_xl == "") {
				showToast(this, this.$t('common.newJob.selectEducation'));
				return false
			}
			if (this.input_address.length == 0) {
				showToast(this, this.$t('common.newJob.selectAddress'));
				return false
			}
			if (this.input_jy == "") {
				showToast(this, this.$t('common.newJob.selectExperience'));
				return false
			}
			if (notBlankStr(this.positionStatement) == false) {
				showToast(this, this.$t('common.newJob.inputDuty'));
				return false
			}
			if (notBlankStr(this.jobRequirements) == false) {
				showToast(this, this.$t('common.newJob.inputRequire'));
				return false
			}
			return true
		},

		postData() {
			let data = {
				corporateType: '',
				education: this.input_xl,
				educationTxt: '',
				enterpriseName: '',
				erId: '',
				id: '',
				industry: '',
				jobRequirements: this.jobRequirements,
				positionName: this.input_zw,
				positionStatement: this.positionStatement,
				recruitingNumbers: this.input_rs,
				releaseTime: '',
				salaryRange: this.input_price,
				salaryRangeTxt: '',
				statusTxt: '',
				vacantType: this.input_lb,
				workExperience: this.input_jy,
				workExperienceTxt: '',
				workType: this.input_lx,
				workTypeTxt: '',
				workplace: this.input_address[0] + ',' + this.input_address[1]	
			}
			log(data)
			return data
		},

		publishTap() {
			if (this.canSubmit()) {
				this.publishReq()
			}
		},
		//0 保存 1 发布 2下架
		publishReq() {
			let data = this.postData()
			data.status = '1'
			
			ajaxAdd(this, enterpriseNewJob, data, res => {
				setTimeout(()=>{
          this.$router.push('/vip/c_recruit_release')
        },1500)
        showToast(this,res.msg,1)
			},err=>{});
		},

		saveTap() {
			if (this.canSubmit()) {
				this.saveReq()
			}
		},

		saveReq() {
			let data = this.postData()
			data.status = '0'
			ajaxAdd(this, enterpriseNewJob, data, res => {
				setTimeout(()=>{
          this.$router.push('/vip/c_recruit_release')
        },1500)
        showToast(this,res.msg,1)
			},err=>{});
		},
	}
};
</script>
<style lang="scss">
.recruit-edit-content {
	background-color: #fff;
	width: 100%;
	padding: 0 140px 60px;
	.recruit-edit-box {
		padding-bottom: 30px;
		border-bottom: 1px solid #d6d7dc;
		.recruit-edit-info {
			padding: 0 14px;
			table {
				width: 100%;
			}
			td {
				padding: 6px 0;
				.zml {
					margin: 0 18px;
				}
			}
			.el-input-group.price {
				width: 150px;
			}
			.el-select > .el-input,
			.el-cascader .el-input,
			.zhiwei,
			.el-input-group.num {
				width: 350px;
			}
		}
		.recruit-edit-require {
			padding: 0 14px;
			.recruit-edit-require-textarea {
				margin-bottom: 12px;
				label {
					color: #666;
				}
				textarea {
					resize: none;
					flex: 1;
					height: 150px;
					border: 1px solid #cccccc;
					padding: 10px 12px;
					font-family: 'microsoft yahei';
				}
			}
		}
	}
	.recruit-edit-box:nth-last-of-type(1) {
		border-bottom: 0;
	}
	.el-input-group__append {
		background-color: #fff;
		padding: 0 10px;
	}
	.el-input-group--append .el-input__inner,
	.el-input-group__prepend {
		border-right: 0px;
	}

	.recruit-edit-btn {
		padding-top: 40px;
		button {
			margin: 0 6px;
		}
	}
}
</style>
